<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>计量插座后台 - 主页</title>
		<link href="css/index.css" rel="stylesheet" />
		
	</head>
	<body bgcolor="#f5f5f5">
		
		<div class="main">
			<div id="hostname" style="text-align: center; padding: 20px;">
				Tyrion
			</div>
			
			<div class="relay" style="text-align: center; padding: 20px;">
				<img src="img/off.png" id='relayImg'>
				<div style="color: darkgray;">
					继电器
				</div>
			</div>
			<div id="warningLog" style="text-align: center; padding: 20px;display: none;">

			</div>
			<div class="hlwDataGroup1">
				<div>
					<span style="font-size: 96px;" id="power">0</span><span style="color: darkgray;font-size: 36px;"> W</span>
					<p>有功功率</p>
				</div>
			</div>
			<div class="hlwDataGroup2">
				<div>
					<span style="font-size: 48px;" id="volt">0</span><span class="unit">  V</span>
					<p>电压</p>
				</div>
				<div>
					<span style="font-size: 48px;" id="current">0</span><span class="unit">  A</span>
					<p>电流</p>
				</div>
				<div>
					<span style="font-size: 48px;" id="energy">0</span><span class="unit">  kWh</span>
					<p>总用电量</p>
				</div>
			</div>
			<div class="hlwDataGroup3">
				<div>
					<span style="font-size: 48px;" id="freq">0</span><span class="unit"> Hz</span>
					<p>电网频率</p>
				</div>
				<div>
					<span style="font-size: 48px;" id="factor">0</span><span class="unit"></span>
					<p>功率因数</p>
				</div>
				<div>
					<span style="font-size: 48px;" id="energyZero">0</span><span class="unit"> kWh</span>
					<p>可清零电量</p>
				</div>
			</div>
			<div class="hlwDataGroup4">
				<div>
					<span style="font-size: 48px;" id="powerS">0</span><span class="unit"> VA</span>
					<p>视在功率</p>
				</div>
				<div>
					<span style="font-size: 48px;" id="hourPerkWh">∞</span><span class="unit"> 小时</span>
					<p>消耗1度电</p>
				</div>
				<div>
					<span style="font-size: 48px;" id="money">0</span><span class="unit"> 元</span>
					<p>单次计费</p>
				</div>
			</div>
			
			<div id="countDown">
					<img src="img/off.png" id='cdImg' style="vertical-align: middle;padding-right: 10px;"><span id='cdP'></span>
			</div>
		
			<div id="powerDown">
					<img src="img/off.png" id='pdImg' style="vertical-align: middle;padding-right: 10px;"><span id='pdP'></span>
			</div>
			
			<div class="menuMain">
				<ul id="menuMainLi">
					<li id="set"><img src="img/set.png">设置</li>
					<li id="para"><img src="img/para.png">参数</li>
				</ul>
			</div>
			
		</div>
		

		
	</body>
	
	<!-- <script src="https://code.jquery.com/jquery-3.7.0.min.js"></script> -->
	<script src="js/jquery.js"></script>
	<script src="js/index.js"></script>
</html>
